<template>
	<div id="l_blog_details" v-loading="tableDataLoading">
        <h3>{{blogList.title}}</h3>
        <p class="colDefualt">
          创建时间：<span class="colInfo">{{blogList.newDate}}</span>
          -最后修改时间：<span class="colInfo">{{blogList.endDate}}</span>
          -阅读：<span class="colInfo">{{blogList.browse - 0 + 1}}</span>
          -评论：<span class="colInfo">{{blogList.commentNum}}</span>
        </p>
        <mavon-editor :ishljs="true" v-model="blogList.content" :toolbarsFlag="false" :editable="false"></mavon-editor>
        
        <div v-loading="commentLoading">
          <h3 style="margin-top: 50px">评论</h3>
          <el-input type="textarea" v-model="commentCont" auto-complete="off"></el-input>
          <el-button type="primary" style="margin: 20px 0" @click="submitForm()">提交</el-button>
        </div>
        <ul id="l_comment">
          <li v-for="(v,i) in blogListShow" :key="i">
            <p class="name clear">
              <span class="fl">{{v.name}}</span>
              <span class="fl fr">{{v.new_date}}</span>
            </p>
            <p>{{v.comment}}</p>
          </li>
          <el-pagination
            v-if="paginationShow"
            @current-change="handleCurrentChange"
            :page-size="5"
            layout="prev, pager, next, jumper"
            :total="comment_list.length" 
            background
            style="text-align: center;margin-top: 30px;">
          </el-pagination>
        </ul>
	</div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
// import 'mavon-editor/dist/css/index.css'

export default {
  metaInfo() {
    return {
      title: this.blogList.title,
      meta: [
        {
          name: "keyWords",
          content: "vue，api，nodejs，node，web，html，blog，博客，俊军，刘俊军"
        },
        {
          name: "keyWords",
          content: "俊军，" + this.blogList.title
        }
      ]
    };
  },
  data() {
    return {
      tableDataLoading: true,
      commentLoading: false,
      blogList: {},
      commentCont: "",
      comment_list: [],

      blogListShow: [],
      blogListHide: false,
      paginationShow: false,
      pageNum: 1
    };
  },
  created() {},
  mounted() {
    // console.log(this.$route.params);

    // this.$store.dispatch('testChangex', {"a":'子组件传的值sssss',age:10});
    // store.commit('increment')

    this.getCategory("api/getBlog_details", { id: this.$route.params.id });
  },
  components: {
    mavonEditor
    // hljs
  },
  computed: {
    // compiledMarkdown: function() {
    //   return marked(this.blogList.content, { sanitize: true });
    // }
  },
  methods: {
    // onScroll: () =>{
    //   console.log(1)
    // },
    handleCurrentChange: function(val) {
      var num = 5 * val;
      this.pageNum = val;
      this.blogListShow = this.comment_list.slice(num - 5, num);
    },
    getCategory: async function(url, data) {
      let _this = this;
      let response = await _this.http.get(url, data, _this);
      // console.log("response",response);

      // if (response.data.data.code) {
      _this.saverFn.httpSuccess(
        _this,
        response,
        null,
        function() {
          _this.blogList = response.data.data;
          _this.blogList.commentNum = response.data.comment.length
            ? response.data.comment.length
            : 0;
          if (_this.blogList.commentNum) {
            _this.comment_list = response.data.comment;
            _this.blogListShow = _this.comment_list.slice(0, 5);

            if (_this.comment_list.length > 5) {
              _this.paginationShow = true;
            }
          }
          _this.tableDataLoading = false;
        },
        true
      );
    },
    setComment: async function(url, data) {
      let _this = this;
      let response = await _this.http.post(url, data);
      _this.saverFn.httpSuccess(_this, response, null, function() {
        if (response.data) {
          _this.commentCont = "";
          _this.comment_list = response.data.data;

          if (_this.comment_list.length > 5) {
            _this.paginationShow = true;
            if (_this.pageNum == 1) {
              _this.blogListShow = _this.comment_list.slice(0, 5);
            }
            if (_this.blogListShow.length < 5) {
              var num = 5 * _this.pageNum;
              _this.blogListShow = _this.comment_list.slice(num - 5, num);
            }
          } else {
            _this.blogListShow = _this.comment_list.slice(0, 5);
            _this.paginationShow = false;
          }
        }
      });
    },
    submitForm() {
      let _this = this;
      if (!_this.commentCont) {
        _this.$message({
          message: "评论不能为空",
          type: "error"
        });
        return;
      }
      _this.commentLoading = true;
      _this.setComment("api/addComment", {
        commentText: _this.commentCont,
        id: _this.$route.params.id
      });
      _this.commentLoading = false;
    }
  }
};
</script>
<style lang="less" scoped>
@import "../public/pubilcColor.less";

#l_blog_details {
  padding: 20px 20px;
  background: @bgcolor;
  margin-bottom: 30px;
  border-bottom: 2px solid rgba(221, 221, 221, 1);
  h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 800;
  }
  p {
    margin: 0 0 10px;
  }
  .colInfo {
    color: @blue;
  }
  .v-note-show {
    flex: 0 0 100%;
    width: 100%;
  }
  .v-note-edit {
    display: none;
  }
}
</style>
<style lang="less">
#l_blog_details {
  .v-note-show {
    flex: 0 0 100%;
    width: 100%;
  }
  .v-note-edit {
    display: none;
  }
}
</style>
